<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" :inline="true"  style="margin-top:20px;margin-left: 20px;">
      <el-form-item label="流程名称" prop="flowName">
        <el-input
          v-model="queryParams.flowName"
          placeholder="请输入流程名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="reservationList" >
      <el-table-column label="编号" prop="instanceId" align="center" width="60"/>
      <el-table-column label="流程名称"  prop="flowName" :show-overflow-tooltip="true" />
       <el-table-column label="实验项目" align="center" prop="experimentalProject" width="100" :show-overflow-tooltip="true" />
      <el-table-column label="学院" align="center" prop="collegeOrgId" width="160" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
         <span>{{collegeFormat(scope.row.collegeOrgId)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="发起人员"  prop="createBy" :show-overflow-tooltip="true" width="80" align="center"/>
      <el-table-column label="发起时间"  prop="createTime" width="150" align="center">
      </el-table-column>
       <el-table-column label="结束时间" prop="endTime" width="150" align="center">
      </el-table-column>
      <el-table-column label="状态" prop="blackCommitFlag" align="center" width="100"  >
          <template slot-scope="scope">
            <span v-if="scope.row.blackCommitFlag==1">已提交</span>
            <span v-else-if="scope.row.blackCommitFlag==0">未提交</span>
            <span v-else>未编辑</span>
          </template>
        </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template slot-scope="scope">
            <el-button
            v-if="scope.row.blackCommitFlag!=1"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="setHandlist(scope.row)"
            v-hasPermi="['labdata:blacklist:edit']"
          >设置黑名单</el-button>
          <el-button
            v-if="scope.row.blackCommitFlag==1"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="viewBlacklist(scope.row)"
          >查看黑名单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 设置实验室黑名单对话框 -->
    <el-dialog :title="handTitle" :visible.sync="handOpen" width="800px" append-to-body>
        <el-form ref="handForm" :model="handForm" :rules="handRules" label-width="100px" >
          <el-row>
            <el-col :span="12" >
            <el-form-item label="违规地点" prop="classRoomId" disabled>
                  <span>{{classRoomIdFormat(handForm.classRoomId)}}</span>
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="违规时间" prop="violationTime" size="small">
              <el-date-picker clearable size="small" style="width: 280px"
                v-model="handForm.violationTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择违规时间">
              </el-date-picker>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
            <el-form-item label="实验项目" prop="experimentalProject" size="small" >
              <span>{{handForm.experimentalProject}}</span>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
            <el-form-item label="违反规定" prop="violationInfo" size="small">
              <el-input v-model="handForm.violationInfo" placeholder="请选择违反规定" />
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="判定老师" prop="judgeTeacher" size="small">
              <el-input v-model="handForm.judgeTeacher" placeholder="请输入判定老师" disabled/>
            </el-form-item>
            </el-col>
            </el-row>
            <el-row>
            <el-col :span="24">
            <div class="form_title" style="margin-left:35px;margin-bottom:20px">
              <p style="font-weight:bold">预约人员</p>
            <template >
              <el-table :data="handForm.labBlackPersonnelAppointmentVos"  size="mini">
               <el-table-column prop="personnelId" label="人员编号"></el-table-column>
                <el-table-column prop="personnelNo" label="工(学)号" ></el-table-column>
                <el-table-column prop="personnelName" label="姓名" align="center"></el-table-column>
                <el-table-column  label="是否加入黑名单" align="center">
                  <template slot-scope="scope">
                  <el-switch  v-model="scope.row.violation" >
                  </el-switch>
                </template>
                </el-table-column>
                <el-table-column prop="violateNum" label="进入黑名单次数" align="center">
                </el-table-column>
              </el-table>
            </template>
            </div>

             <div class="form_title" style="margin-left:35px;margin-bottom:20px">
              <p style="font-weight:bold">参与人员</p>
            <template >
              <el-table :data="handForm.labBlackPersonnelParticipationVos"  size="mini" >
              <el-table-column prop="personnelId" label="人员编号"></el-table-column>
              <el-table-column prop="personnelNo" label="工(学)号" ></el-table-column>
                <el-table-column prop="personnelName" label="姓名" align="center"></el-table-column>
                <el-table-column  label="是否加入黑名单" align="center">
                  <template slot-scope="scope">
                  <el-switch  v-model="scope.row.violation" >
                  </el-switch>
                </template>
                </el-table-column>
                <el-table-column prop="violateNum" label="进入黑名单次数" align="center">
                </el-table-column>
              </el-table>
            </template>
            </div>

            </el-col>
            </el-row>
            <el-row>
            <el-col :span="24">
            <el-form-item label="现场图片" >
              <UploadCom ref="handUpload" @handSubmitData="handSubmitData" isImage description="backList" :userFileList="handFileList" class="form_long"/>
            </el-form-item>
            </el-col>
            </el-row>
            <el-col :span="24">
            <el-form-item label="备注说明" prop="comments" size="small">
              <el-input  type="textarea" v-model="handForm.comments" rows="4" placeholder="请输入备注说明" />
            </el-form-item>
            </el-col>
         </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="handSubmitForm" v-hasPermi="['labdata:blacklist:edit']">保 存</el-button>
         <el-button type="primary" @click="handCommitForm" v-hasPermi="['labdata:blacklist:edit']">提 交</el-button>
        <el-button @click="handCancel">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 设置实验室黑名单对话框 -->
    <el-dialog :title="handTitle" :visible.sync="viewOpen" width="800px" append-to-body>
        <el-form ref="handForm" :model="handForm"  label-width="100px" >
          <el-row>
            <el-col :span="12" >
            <el-form-item label="违规地点"  class="form_item_bottom">
                  <span>{{classRoomIdFormat(handForm.classRoomId)}}</span>
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="违规时间" class="form_item_bottom">
              {{handForm.violationTime}}
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
            <el-form-item label="实验项目" class="form_item_bottom">
              <span>{{handForm.experimentalProject}}</span>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
            <el-form-item label="违反规定" class="form_item_bottom">
              {{handForm.violationInfo}}
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="判定老师" class="form_item_bottom">
              {{handForm.judgeTeacher}}
            </el-form-item>
            </el-col>
            </el-row>
            <el-row>
            <el-col :span="24">
            <div class="form_title" style="margin-left:35px;margin-bottom:20px">
              <p style="font-weight:bold">预约人员</p>
            <template >
              <el-table :data="handForm.labBlackPersonnelAppointmentVos"  size="mini">
               <el-table-column prop="personnelId" label="人员编号"></el-table-column>
                <el-table-column prop="personnelNo" label="工(学)号" ></el-table-column>
                <el-table-column prop="personnelName" label="姓名" align="center"></el-table-column>
                <el-table-column prop="violateNum" label="进入黑名单次数" align="center">
                </el-table-column>
              </el-table>
            </template>
            </div>

             <div class="form_title" style="margin-left:35px;margin-bottom:20px">
              <p style="font-weight:bold">参与人员</p>
            <template >
              <el-table :data="handForm.labBlackPersonnelParticipationVos"  size="mini" >
              <el-table-column prop="personnelId" label="人员编号"></el-table-column>
              <el-table-column prop="personnelNo" label="工(学)号" ></el-table-column>
                <el-table-column prop="personnelName" label="姓名" align="center"></el-table-column>
                <el-table-column prop="violateNum" label="进入黑名单次数" align="center">
                </el-table-column>
              </el-table>
            </template>
            </div>

            </el-col>
            </el-row>
            <el-row>
            <el-col :span="24">
            <el-form-item label="现场图片" class="form_item_bottom">
              <UploadCom ref="handUpload" disabled isImage description="backList" :userFileList="handFileList" class="form_long"/>
            </el-form-item>
            </el-col>
            </el-row>
            <el-col :span="24">
            <el-form-item label="备注说明" class="form_item_bottom">
              {{handForm.comments}}
            </el-form-item>
            </el-col>
         </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handCancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listReservationBackList,getReservation } from "@/api/labdata/reservation";
import { listBlacklist, getBlacklist,  addBlacklist, updateBlacklist,  } from "@/api/labdata/blacklist";
import { formatCurrentDate } from "@/utils/index";
import { listOrgnization} from "@/api/labdata/orgnization";
import {treeselect } from "@/api/labdata/orgnization";
import UploadCom from "@/views/labdata/commons/upload.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getOrgByFunctionOpt,listSecondOrgLab} from "@/api/labdata/orgnization";
export default {
  name: "ReservationComponent",
  components:{UploadCom,Treeselect},
  data() {
    return {
       //二级机构
      secondOrgList: [],
      //二级机构下的实验室
      secondOrgLabList: [],
      // 部门树选项
      deptOptions: [],
      //用户对象
      user:{},
      // 表格树数据
       deptList: [],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 实验室预约表格数据
      reservationList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      viewOpen: false,
    // 设置黑名单弹出层标题
      handTitle: "",
    // 设置黑名单是否显示弹出层
      handOpen: false,
    // 预约id
    globalReservationId: "",
    // 黑名单表单参数
    handForm:{
      blacklistId:null,
      reservationId:null,
      classRoomId:null,
      experimentalProject:null,
      violationInfo:null,
      violationPersonnelId:null,
      comments:null,
      violationTime:null,
      judgeTeacher:null,
      // 预约人员
      labBlackPersonnelAppointmentVos:[],
      // 参与人员
      labBlackPersonnelParticipationVos:[],
    },

      // 项目类型字典
      labProjectOptOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        flowName: null,
        collegeOrgId: null,
        status: null
      },
      //附件集合
      fileList: [],
      // 黑名单附件集合
      handFileList:[],

      listDisabled: false,
       // 表单参数
      form: {
        //预约人员
        appointmentList: [],
        //参与人员
        participationList: []

      },
      // 黑名单表单检验
     handRules: {
        // classRoomId: [
        //   { required: true, message: "违规地点名称不能为空", trigger: "blur" }
        // ],
        violationTime: [
          { required: true, message: "违规时间不能为空", trigger: "blur" }
        ],
        experimentalProject: [
          { required: true, message: "实验项目不能为空", trigger: "blur" }
        ],
        violationInfo: [
          { required: true, message: "违反规定不能为空", trigger: "blur" }
        ],
         judgeTeacherId: [
          { required: true, message: "判定老师不能为空", trigger: "blur" }
        ]

      }
    };
  },
  created() {
    this.getList();
    this.getTreeselect();
    this.getDicts("labProjectOpt").then(response => {
      this.labProjectOptOptions = response.data;
    });
    this.getDicts("flowStatusOpt ").then(response => {
        this.flowStatusOptOptions = response.data;
      });
    getOrgByFunctionOpt(2).then(response => {
      this.secondOrgList = response.data;
    });
  },

  methods: {
     /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },

    /** 查询部门列表 */
    getDeptList() {
      this.loading = true;
      this.queryParams={}
      listOrgnization(this.queryParams).then(response => {
        this.deptList =response.rows;
      });
    },

    /** 查询实验室预约申请列表 */
    getList() {
      this.loading = true;
      //this.queryParams.status = "1"
      listReservationBackList(this.queryParams).then(response => {
        this.reservationList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 项目类型字典翻译
    labProjectOptFormat(row, column) {
      return this.selectDictLabel(this.labProjectOptOptions, row.labProjectOpt);
    },
     // 取消按钮
    handCancel() {
      // this.showCopy = false;
      this.handOpen = false;
      this.viewOpen = false;
      this.handReset();
    },
    // 表单重置
    handReset() {
      this.handForm = {
      blacklistId:null,
      reservationId:null,
      classRoomId:null,
      experimentalProject:null,
      violationInfo:null,
      violationPersonnelId:null,
      comments:null,
      violationTime:null,
      judgeTeacherId:null,
      // 预约人员
      labBlackPersonnelAppointmentVos:[],
      // 参与人员
      labBlackPersonnelParticipationVos:[],

      };
      this.handFileList = [];
      this.resetForm("handForm");
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

     // 流程状态字典翻译
      flowStatusOptFormat(row, column) {
        return this.selectDictLabel(this.flowStatusOptOptions, row.flowStatusOpt);
      },

/** 设置黑名单操作 */
 async  setHandlist(row) {
      this.handReset();
      const instanceId = row.instanceId || this.ids
      this.globalReservationId=row.instanceId;
    await  getBlacklist(instanceId).then(response => {
        this.handForm = response.data;
        this.handForm.judgeTeacher = this.$store.state.user.nickName;
        this.handFileList = this.handForm.images;
      });
    await  getReservation(instanceId).then(response => {
        this.handForm.classRoomId = this.handForm.classRoomId == null ? response.data.classRoomId:this.handForm.classRoomId;
        this.handForm.experimentalProject = this.handForm.experimentalProject == null? response.data.experimentalProject:this.handForm.experimentalProject;
        this.handleLabChange(response.data.collegeOrgId);
      }),
      this.$forceUpdate();
      this.handOpen = true;
      this.handTitle = "设置黑名单";
    },
  async viewBlacklist(row){
        const instanceId = row.instanceId || this.ids
        this.globalReservationId=row.instanceId;
      await  getBlacklist(instanceId).then(response => {
          this.handForm = response.data;
          this.handFileList = this.handForm.images;
        });
      await  getReservation(instanceId).then(response => {
          this.handForm.classRoomId = this.handForm.classRoomId == null ? response.data.classRoomId:this.handForm.classRoomId;
          this.handForm.experimentalProject = this.handForm.experimentalProject == null? response.data.experimentalProject:this.handForm.experimentalProject;
          this.handleLabChange(response.data.collegeOrgId);
        }),
        this.$forceUpdate();
        this.viewOpen = true;
        this.handTitle = "查看黑名单";
    },
/** 提交按钮 */
    handSubmitForm(isCommitted) {
      if(isCommitted && isCommitted==1){
        this.handForm.isCommitted = 1;
      }else{
         this.handForm.isCommitted = 0;
      }
      this.$refs["handForm"].validate(valid => {
        if (valid) {
          this.$refs["handUpload"].doSubmit();
        }
      });
    },
    handCommitForm(){
      this.handSubmitForm(1);
    },
    /** 提交按钮 */
    handSubmitData(handFileList) {
      this.handForm.images = handFileList;
      if (this.handForm.blacklistId != null) {
        updateBlacklist(this.handForm).then(response => {
          this.msgSuccess("黑名单修改成功");
          // this.$forceUpdate();
          this.handOpen = false;
          this.getList();

        });
      } else {
        this.handForm.reservationId = this.globalReservationId;
        addBlacklist(this.handForm).then(response => {
          this.msgSuccess("黑名单设置成功");
          this.handOpen = false;
          this.getList();
        });
      }

    },
      handleLabChange(item) {
      if (item) {
        this.form.classRoomId = null;
        this.form.instrumentDeviceId = null;
        this.form.totalSeats = null;
        listSecondOrgLab(item).then(response => {
          this.secondOrgLabList = response.data;
        });
      }
    },
    collegeFormat(value) {
       var  datas = this.secondOrgList
        for(let key in datas){
            if(datas[key].orgId == value){
                return datas[key].orgName;
            }
        }
        return "";
     },

     // 实验室匹配
     classRoomIdFormat(value) {
       let  datas = this.secondOrgLabList
        for(let key in datas){
            if(datas[key].orgId== value){
                return datas[key].orgName;
            }
        }
        return "";
     },
      // 所在部门字典翻译
      departmentOrgIdFormat(value) {
       var  datas = this.deptList
        for(let key in datas){
            if(datas[key].orgId == value){
                return datas[key].orgName;
            }
        }
        return "";
     },
  }
};
</script>
<style type="text/css" scoped lang="scss">
  .form_long{
    width:596px;
  }
  .form_short{
    width:200px;
  }
  /deep/ .el-button.active{
    text-decoration: underline;
    color: #0000ee;
  }
  /deep/ .el-button.dis_active {
    color: #999999
  }
  .select_view {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
   .purchase_s_view {
    display: flex;
    flex-direction: row;
    //align-items: center;
  }
   .table_button {
    width: 100%;
    text-align: center;
    line-height: 20px;
    border-bottom: 1px solid #f6f5f5;
    color: #43bef8;
    cursor: pointer;
    border: 0;
  }
/deep/ .el-dialog__body{
  padding: 0px 20px;
}
/deep/ .el-table__row .el-input--medium .el-input__inner {
    font-size: 10px;
    font-weight: 500;
    height: 30px;
    line-height: 30px;
}
.form_item_bottom{
  margin-bottom: 5px;
}
</style>
